<template>
<!-- 二次封装 -->
  <el-table stripe :data="data" style="width: 100%">
      
    <el-table-column
      v-for="(item, index) in cols"
      :key="index"
      :label="item.title"
      :prop="item.name"
      :width="item.width"
      :align="item.align"
      :type="item.type"
    >
    <!-- 插槽 -->
        <template v-slot="{row,$index,column}">
            <slot
            v-if="item.slot"
            :name="item.slot"
            :row="row"
            :index="$index"
            :column="column"
            >
            </slot>
        </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
import { Search, Edit, Delete, Setting } from "@element-plus/icons-vue";

const props = defineProps({
  // 数据
  data: {
    required: true,
    type: Array,
    default: () => []
  },
  // 列
  cols: {
    required: true, //必选
    type: Array, //类型
    default: () => [] //默认
  }
});
const emit = defineEmits(["change", "del", "open", "rolesOpen"]);
const del = row => {
  emit("del", row);
};
const change = row => {
  emit("change", row);
};
const open = row => {
  emit("open", row);
};
const roles = row => {
  emit("rolesOpen", row);
};
</script>
<style lang="scss" scoped>
</style>